<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>畅销书排行榜</title>
</head>
<style>
   #div1{
       /*border: 1px solid red;*/
       width: 250px;
       font-size: 12px;
       line-height: 28px;
       color: #1a66b3;
       background: linear-gradient(to bottom,#F9FBCB,#F8F8F3);
   }
   .div2{
       /*border: 1px solid red;*/
       font-size: 16px;
       text-indent: 1em;
       line-height: 30px;
       background-color: #518700;
       color: white;
       font-weight: bold;
       background-image: url("img/bang.gif");
       background-repeat: no-repeat;
       background-position: 100px 3px;
   }
   ul{
       list-style: none;
   }
   ul img{
       vertical-align: middle;
   }
   a{
       text-decoration: none;
   }
   a:hover{
       text-decoration: underline;
   }
</style>
<body>
<div id="div1">
    <div class="div2">
        畅销书排行
    </div>
    <ul>
        <li><img src="img/book_no01.gif">&nbsp;&nbsp;<a href="#">不抱怨的世界(畅...</a></li>
        <li><img src="img/book_no02.gif">&nbsp;&nbsp;<a href="#">遇见未知的自己...</a></li>
        <li><img src="img/book_no03.gif">&nbsp;&nbsp;<a href="#">活法（季羡林、...</a></li>
        <li><img src="img/book_no04.gif">&nbsp;&nbsp;<a href="#">高效能人士的七个习惯</a></li>
        <li><img src="img/book_no05.gif">&nbsp;&nbsp;<a href="#">被迫强大（北外女生香奈儿...</a></li>
        <li><img src="img/book_no06.gif">&nbsp;&nbsp;<a href="#">遇见心想事成的自己（《遇...</a></li>
        <li><img src="img/book_no07.gif">&nbsp;&nbsp;<a href="#">世界上最伟大的推销员（插...</a></li>
        <li><img src="img/book_no08.gif">&nbsp;&nbsp;<a href="#">我的成功可以复制（唐骏亲...</a></li>
        <li><img src="img/book_no09.gif">&nbsp;&nbsp;<a href="#">少有人走的路：心智成熟的...</a></li>
        <li><img src="img/book_no10.gif">&nbsp;&nbsp;<a href="#">活出全新的自己——唤醒...</a></li>
    </ul>
</div>
</body>
</html>